<template>
	<view>
		<!-- header部分 -->
		<view class='header-Container header-height'>
			<view class="header-bg"></view>
			<navHeader pageTitle="账户" colorTheme="black" hideBackBtn>
				<template v-slot:rightBtns>
					<view class="row-div" style="position: relative;margin-right: 40upx;" @click="gotoMsgCenter">
						<image src="/static/assets/message-b.png" style="width: 47upx;height: 47upx;" />
						<view v-if="noticeTipCount || $store.state.msgNumber" class="msgCount">{{noticeTipCount + $store.state.msgNumber>99 ? '99+' : noticeTipCount + $store.state.msgNumber}}</view>
					</view>
				</template>
			</navHeader>
		</view>
		<view class="row-around segmented-control">
			<view class="column-div" v-for="(item,index) in items" :key="index" @click="onClickItem(index)">
				<text :class="{'border_view': true,'border_active_text': current == index}">{{item}}</text>
				<view :class="{'border_view': true, 'border_active': current == index}"></view>
			</view>
		</view>
		<view style="padding: 30upx;">
			<commonAccount ref="commonAccount" v-if="current == 0" />
			<myAccount ref="myAccount" v-if="current == 1" @getTotalPageNo="getTotalPageNo" />
		</view>
		<!-- <load-refresh ref="loadRefresh" isRefresh refreshType="hollowDots" :pageNo="page" :totalPageNo="totalPageNo" color="#FE5E49"
		 backgroundCover="#F3F5F5" @refresh="onRefresh" @loadMore="onLoadMore" :heightReduce="heightReduce" style="flex: 1;">
			 <view slot="content-list" style="padding: 30upx;">
				<commonAccount ref="commonAccount" v-if="current == 0" />
				<myAccount ref="myAccount" v-if="current == 1" @getTotalPageNo="getTotalPageNo"/>
			 </view>
		</load-refresh> -->
	</view>
</template>

<script>
	import commonAccount from '../commonAccount/commonAccount.vue';
	import myAccount from '../myAccount/myAccount.vue';
	import navHeader from '@/components/nav-header/nav-header';
	
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		components: {
			navHeader,
			commonAccount,
			myAccount
		},
		data() {
			return {
				items: ['共有账户', '我的账户'],
				current: 0,
				noticeTipCount: 0,
				page: 1,
				totalPageNo: 999,
				isLoadText: false,
				heightReduce: '250',
				number: 0
			}
		},
		computed: {
			...mapState(['hasLogin', 'downUrl', 'imgSite', 'url'])
		},
		onShow() {
			console.log("onShow", this.current)
			if (this.current == 1) {
				this.$refs.myAccount.getMyInterest()
			}
			let platform = uni.getSystemInfoSync().platform
			// #ifdef H5
			this.heightReduce = '250'
			// #endif
			this.getMsgCount()
			this.$api.globalUtil.setTabBarBadge();
			this.current == 0 ? this.totalPageNo = 0 : this.totalPageNo = 999
		},
		methods: {
			gotoMsgCenter() {
				this.$api.globalUtil.methodFilter({
					that: this,
					success: function() {
						uni.navigateTo({
							url: '/pagesUser/msgCenter'
						});
					}
				});
			},
			getMsgCount() {
				return this.$api.globalUtil.requestAjax({
					url: '/customerNoticeApi/customerNoticeUnreadCountApi',
					method: 'POST',
					data: {
						cnType: "",
						cnStatus: '0'
					},
					success: (res) => this.noticeTipCount = res.data.response
				});
			},
			onClickItem(index) {
				this.current !== index ? this.current = index : '',
					this.totalPageNo = 999
				if (this.current == 0) {
					this.isLoadText = false
					this.totalPageNo = 0
					this.page = 0
				}
			},
			onRefresh() {
				if (this.current == 1) this.$refs.myAccount.infoRequest()
				if (this.current == 0) this.$refs.commonAccount.infoRequest()
				// setTimeout(() => this.$refs.loadRefresh.completed(), 500)
			},
			onLoadMore() {
				if (this.current == 1) {
					this.$refs.myAccount.getTradingRecord("1")
				}
			},
			getTotalPageNo(totalPageNo, page) {
				if (this.current == 1) {
					this.isLoadText = true
					this.totalPageNo = totalPageNo
					this.page = page
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	/* header部分 */
	.header-Container {
		width: 100%;
		height: 176rpx;
		overflow: hidden;
		//box-shadow: 0px 1rpx 1rpx 0px rgba(0, 0, 0, 0.08);
		background: rgba(255, 255, 255, 1);

		.leftBtns {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 86rpx;

			.back {
				margin-left: 17rpx;
				width: 44rpx;
				height: 44rpx;
			}
		}

		/deep/ .title {
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 86rpx;
			line-height: 86rpx;
			text-align: center;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: rgba(51, 51, 51, 1);
		}

		.msgCount {
			position: absolute;
			bottom: 34rpx;
			right: -10rpx;
			box-shadow: 0px 1rpx 4rpx 0px rgba(68, 68, 68, 0.2);
			min-width: 26rpx;
			width: auto;
			height: 26rpx;
			line-height: 26rpx;
			text-align: center;
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FE5E49;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0px 1rpx 4rpx 0px rgba(68, 68, 68, 0.2);
			border-radius: 13rpx;
		}
	}

	.my-badge {
		background-color: #FFFFFF;
		color: #FE5E49;
		position: absolute;
		right: -20upx;
		top: -15upx;
		border: 1px solid #FE5E49;
	}

	.segmented-control {
		position: sticky;
		top: 88rpx;
		/* #ifdef H5 */
		top: 88rpx !important;
		/* #endif */

		/* #ifdef APP-PLUS */
		top: calc(var(--status-bar-height) + 88rpx) !important;
		/* #endif */

		width: 100%;
		height: 80upx;
		background-color: #FFFFFF;
		z-index: 99;

		.border_view {
			margin-top: 13upx;
			font-size: 24upx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
		}

		.border_active_text {
			font-size: 28upx;
			font-weight: bold;
		}

		.border_active {
			width: 40upx;
			border: 1px solid #FE5E49;
		}
	}
</style>
